<template>
    <el-card
        shadow="always"
        :body-style="{
            'border-top': '4px solid #2B81FC',
        }"
    >
        <div>
            <span class="personTitle">{{ title }}</span>
            <span class="personSubTitle">{{ subTitle }}</span>
        </div>
        <el-row class="showInfo">
            <div v-for="(item, index) in showData" :key="index">
                <el-col
                    :span="Math.floor(24 / showData.length)"
                    class="showItem"
                >
                    <div :class="item.label == '新入职' ? 'line' : ''">
                        <div class="si-label">{{ item.label }}</div>
                        <div class="si-value">
                            <span class="si-Number">{{ item.value }}</span
                            >人
                        </div>
                    </div>
                </el-col>
            </div>
        </el-row>
    </el-card>
</template>

<script>
export default {
    name: "profileShow",
    props: {
        title: {
            type: String,
            default: "",
        },
        subTitle: {
            type: String,
            default: "",
        },
        showData: {
            type: Array,
            default: () => [],
        },
    },
};
</script>

<style scoped>
.personTitle {
    font-size: 16px;
    font-weight: 700;
}
.personSubTitle {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 700;
}
.showInfo {
    height: 62px;
    margin-top: 10px;
}
.showItem {
    display: flex;
    align-items: center;
}
.si-label {
    font-size: 14px;
    color: #42526e;
    font-weight: 500;
}
.si-Number {
    font-size: 14px;
    color: #2b81fc;
    font-weight: 600;
}
.si-value {
    font-size: 14px;
    color: #42526e;
    font-weight: 500;
}


.line {
    position: relative;
}
/***用伪类画一条竖线在左侧40px距离*/
.line::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 38px;
    background-color: #183da3;
}
</style>
